<script lang="ts" setup>
import { ref } from 'vue'
import { useConfigStore } from '../store/config'
import { UpgradeService } from "../../bindings/app/service/index";
import { Window, Browser, Application } from '@wailsio/runtime';
const store = useConfigStore()
const isMaximised = ref(false)
const getIsMaximised = () => {
    Window.IsMaximised().then((ok: boolean) => {
        isMaximised.value = ok
    })
}
getIsMaximised()
const handleToggleMaximise = () => {
    Window.ToggleMaximise()
    isMaximised.value = !isMaximised.value
}
const handleMinimise = () => {
    Window.Minimise()
}
const handleQuit = () => {
    Application.Quit()
}
const handleChangeLocale = (locale: string) => {
    store.set("locale", locale)
}
const handleChangeTheme = (theme: string) => {
    store.set("theme", theme)
}
const handleSelect = (value: string) => {
    console.log(value)
}
const downloading = ref(false)
const handleHelpSelect = (value: string) => {
    if (value === 'docs') {
        Browser.OpenURL("http://tk.lufuhu.com/RobotArm/")
    } else if (value === 'upgrade') {
        UpgradeService.Check().then((res: any) => {
            console.log(res)
            if (res) {
                downloading.value = true
                UpgradeService.Download(res).then((res: any) => {
                    console.log(res)
                    UpgradeService.Install(res).then((res) => { 
                        console.log(res)
                        downloading.value = false
                         handleQuit()
                    }).catch((err) => { 
                        console.log(err)
                        downloading.value = false
                    })
                })
            }
        })
    } else if (value === 'about') {
        // OpenAbout()
    }
}
</script>

<template>
    <div class="flex items-center titlebar-h z-50">
        <div class="ml-2 mr-1">
            <img src="../assets/logo.svg" class="w-4.5 h-4.5" />
        </div>
        <a-dropdown @select="handleSelect" position="bl">
            <a-button type='text' class="!px-1.5">{{ $t('titlebar.setting') }}</a-button>
            <template #content>
                <a-doption>Option 1</a-doption>
                <a-doption disabled>Option 2</a-doption>
                <a-doption :value="{ value: 'Option3' }">Option 3</a-doption>
            </template>
        </a-dropdown>
        <a-dropdown @select="handleChangeTheme" position="bl">
            <a-button type='text' class="!px-1.5">{{ $t('titlebar.theme') }}</a-button>
            <template #content>
                <a-doption value="light">{{ $t('titlebar.light') }}</a-doption>
                <a-doption value="dark">{{ $t('titlebar.dark') }}</a-doption>
            </template>
        </a-dropdown>
        <a-dropdown @select="handleChangeLocale" position="bl">
            <a-button type='text' class="!px-1.5">{{ $t('titlebar.language') }}</a-button>
            <template #content>
                <a-doption value="zh">中文</a-doption>
                <a-doption value="en">English</a-doption>
            </template>
        </a-dropdown>
        <a-dropdown @select="handleHelpSelect" position="bl">
            <a-button type='text' class="!px-1.5">{{ $t('titlebar.help') }}</a-button>
            <template #content>
                <a-doption value="docs">{{ $t('titlebar.docs') }}</a-doption>
                <a-doption value="upgrade">{{ downloading ? $t('titlebar.downloading') : $t('titlebar.upgrade') }}</a-doption>
                <a-doption value="about">{{ $t('titlebar.about') }}</a-doption>
            </template>
        </a-dropdown>
        <div class="flex-1 h-full drag"></div>
        <a-button @click="handleMinimise" type='text' class="!px-5 titlebar-h" :title="$t('titlebar.minimise')">
            <template #icon>
                <i class="iconfont icon-windows-minimize text-xs"></i>
            </template>
        </a-button>
        <a-button @click="handleToggleMaximise" type='text' class="!px-5 titlebar-h" :title="$t('titlebar.maximize')">
            <template #icon>
                <i class="iconfont text-xs" :class="isMaximised ? 'icon-windows-maximize' : 'icon-windows-unmaximize'"></i>
            </template>
        </a-button>
        <a-button @click="handleQuit" type='text' class="!px-5 titlebar-h hover:!bg-red-500 hover:!text-white" :title="$t('titlebar.close')">
            <template #icon>
                <i class="iconfont icon-windows-close text-xs"></i>
            </template>
        </a-button>
    </div>
</template>
